<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         * get()在前面讲过
         * */


        /**
         * set()
         * 对应的反射API方法为Reflect.set()
         * 返回值为Boolean
         * 参数: 
         *     target: 目标对象
         *     value: 要赋的值
         *     receiver: 接收最初赋值的对象
         *     property: 引用的目标对象的字符串键属性
         * */
        const myTarget1 = {}
        const proxy1 = new Proxy(myTarget1, {
            set(target, property, value, receiver) {
                console.log(target, property, value, receiver)
                return Reflect.set(...arguments)
            }
        })

        proxy1.name = 'xiaomi'
        console.log(proxy1.age = '123')


        /**has()
         * 返回Boolean值
         * 在有in操作符时会被调用
         * 参数:
         *    target:目标对象
         *    property: 引用的目标对象上的字符串键属性
         * */
        const myTarget2 = {
            name: 'xiaomi'
        }
        const proxy3 = new Proxy(myTarget2, {
            has(target, property) {
                console.log('has()',target, property)
                return Reflect.has(...arguments)
            }
        })
        console.log('name' in proxy3) // true


        /**
         * apply()
         * 函数调用时被调用
         * 参数:
         *     target: 目标对象
         *     thisArg: 调用函数时的this参数
         *     argumentList: 调用函数时的参数列表
         * 捕获器不变式:target必须是一个函数
         * */
        const myTarget3 = () => {}
        const proxy4 = new Proxy(myTarget3, {
            apply(target,thisArg, ...argumentList) {
                console.log('----apply----')
                console.log(target)
                console.log(thisArg)
                console.log(...argumentList)
            }
        })

        proxy4(1,2,3)

    </script>
</body>

</html>